import {View, Text, Button} from 'react-native';
import {useState} from 'react'; // 导入useState钩子

/* 
面试问题
1 问的简单：  useState是同步的还是异步

2 问的复杂：  你介绍一些 useState 
  1 是react 内置的钩子函数
  2 做什么用 数据做状态管理 
  3 用法   传入一个初始值，返回数组 第一个元素 数据本身，第二个元素是函数-修改数据
  4 useState 为了性能考量  异步
  5 如果想要获取到修改后的数据的值，一般会setNum 传递回调函数 - 参数 就是 变量 修改后的值 

 */

export default function App() {
  // 声明状态变量num，初始值为0，同时获取更新函数setNum
  const [num, setNum] = useState(0);

  const add1 = () => {
    // setNum 异步
    setNum(num + 1);
    console.log('A', num); // 0
    setNum(num + 1);
    console.log('B', num); // 0
    setNum(num + 1);
    console.log('C', num); // 0
  };

  const add2 = () => {
    // setNum 接收的是一个函数  形参 等于实时 希望修改后的 num的值
    setNum(preNum => {
      console.log('A', preNum);
      return preNum + 1;
    });
    setNum(preNum => {
      console.log('B', preNum);
      return preNum + 1;
    });
    setNum(preNum => {
      console.log('C', preNum);
      return preNum + 1;
    });
  };

  return (
    <View>
      <Text>base</Text>
      <Text>{num.toString()}</Text> {/* 显示当前状态值 */}
      {/* 方式1：直接传入新值来更新状态 */}
      <Button title="Increment" onPress={add1} />
      {/* 方式2：使用函数式更新，基于先前的状态计算新状态 */}
      <Button title="Increment" onPress={add2} />
    </View>
  );
}
